<!doctype html>
<html>
<head>
<title>Your Font/Glyphs</title>
<link rel="stylesheet" href="style.css" />
<style>
	section, header, footer {display: block;}
	body {
		font-family: sans-serif;
		color: #444;
		line-height: 1.5;
		font-size: 1em;
	}
	* {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		margin: 0;
		paddin: 0;
	}
	.glyph {
		float: left;
		text-align: center;
		background: #eee;
		padding: .75em;
		margin: .75em 1.5em .75em 0;
		width: 7em;
		border-radius: .375em;
		box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #ccc;
	}
	.glyph input {
		width: 100%;
		text-align: center;
		font-family: consolas, monospace;
	}
	.glyph input, .mtm {
		margin-top: .75em;
	}
	.w-main {
		width: 80%;
	}
	.centered {
		margin-left: auto;
		margin-right: auto;
	}
	.fs1 {
		font-size: 2em;
	}
	header {
		margin: 2em 0;
		padding-bottom: .5em;
		color: #666;
		box-shadow: 0 2px #eee;
	}
	header h1 {
		font-size: 2em;
		font-weight: normal;
	}
	.clearfix:before, .clearfix:after { content: ""; display: table; }
	.clearfix:after { clear: both; }
	footer {
		margin-top: 2em;
		padding: .5em 0;
		box-shadow: 0 -2px #eee;
	}
	a, a:visited {
		color: #B35047;
		text-decoration: none;
	}
	a:hover, a:focus {color: #000;}
	.box1 {
		display: inline-block;
		width: 15em;
		padding: .25em .5em;
		background: #eee;
		margin: .5em 1em .5em 0;
	}
</style>
</head>
<body>
	<div class="w-main centered">
	<section class="mtm clearfix" id="glyphs">
	<header>
		<h1>Your font contains the following glyphs</h1>
		<p>The generated SVG font can be imported back to <a href="http://keyamoon.com/icomoon/app">IcoMoon</a> for modification.</p>
	</header>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x2764;"></div>
		<input type="text" readonly="readonly" value="&amp;#x2764;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x2699;"></div>
		<input type="text" readonly="readonly" value="&amp;#x2699;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x26ad;"></div>
		<input type="text" readonly="readonly" value="&amp;#x26ad;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x238b;"></div>
		<input type="text" readonly="readonly" value="&amp;#x238b;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x2716;"></div>
		<input type="text" readonly="readonly" value="&amp;#x2716;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x21f2;"></div>
		<input type="text" readonly="readonly" value="&amp;#x21f2;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x2709;"></div>
		<input type="text" readonly="readonly" value="&amp;#x2709;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x2631;"></div>
		<input type="text" readonly="readonly" value="&amp;#x2631;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x2317;"></div>
		<input type="text" readonly="readonly" value="&amp;#x2317;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x2630;"></div>
		<input type="text" readonly="readonly" value="&amp;#x2630;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x21bb;"></div>
		<input type="text" readonly="readonly" value="&amp;#x21bb;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x25cf;"></div>
		<input type="text" readonly="readonly" value="&amp;#x25cf;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x270e;"></div>
		<input type="text" readonly="readonly" value="&amp;#x270e;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x25a4;"></div>
		<input type="text" readonly="readonly" value="&amp;#x25a4;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x25a6;"></div>
		<input type="text" readonly="readonly" value="&amp;#x25a6;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x2637;"></div>
		<input type="text" readonly="readonly" value="&amp;#x2637;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x25bb;"></div>
		<input type="text" readonly="readonly" value="&amp;#x25bb;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x25c5;"></div>
		<input type="text" readonly="readonly" value="&amp;#x25c5;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x25f3;"></div>
		<input type="text" readonly="readonly" value="&amp;#x25f3;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x25f0;"></div>
		<input type="text" readonly="readonly" value="&amp;#x25f0;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x2661;"></div>
		<input type="text" readonly="readonly" value="&amp;#x2661;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x26ae;"></div>
		<input type="text" readonly="readonly" value="&amp;#x26ae;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x2195;"></div>
		<input type="text" readonly="readonly" value="&amp;#x2195;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x25c9;"></div>
		<input type="text" readonly="readonly" value="&amp;#x25c9;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x2750;"></div>
		<input type="text" readonly="readonly" value="&amp;#x2750;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x25b6;"></div>
		<input type="text" readonly="readonly" value="&amp;#x25b6;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#xe002;"></div>
		<input type="text" readonly="readonly" value="&amp;#xe002;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x25c0;"></div>
		<input type="text" readonly="readonly" value="&amp;#x25c0;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x25ba;"></div>
		<input type="text" readonly="readonly" value="&amp;#x25ba;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x25fc;"></div>
		<input type="text" readonly="readonly" value="&amp;#x25fc;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x2b15;"></div>
		<input type="text" readonly="readonly" value="&amp;#x2b15;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x25c7;"></div>
		<input type="text" readonly="readonly" value="&amp;#x25c7;" />
	</div>
	</section>
	<section class="mtm clearfix" id="glyphs">
	<header>
		<h1>CSS Class Names</h1>
	</header>
	<span class="box1">
		<i aria-hidden="true" class="icon-share"></i>
		&nbsp;icon-share
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-cog"></i>
		&nbsp;icon-cog
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-link"></i>
		&nbsp;icon-link
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-out"></i>
		&nbsp;icon-out
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-remove"></i>
		&nbsp;icon-remove
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-export"></i>
		&nbsp;icon-export
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-email"></i>
		&nbsp;icon-email
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-add"></i>
		&nbsp;icon-add
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-grid"></i>
		&nbsp;icon-grid
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-list"></i>
		&nbsp;icon-list
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-retweet"></i>
		&nbsp;icon-retweet
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-record"></i>
		&nbsp;icon-record
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-pen-alt-fill"></i>
		&nbsp;icon-pen-alt-fill
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-list-2"></i>
		&nbsp;icon-list-2
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-grid-view"></i>
		&nbsp;icon-grid-view
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-paragraph-center"></i>
		&nbsp;icon-paragraph-center
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-left-to-right"></i>
		&nbsp;icon-left-to-right
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-right-to-left"></i>
		&nbsp;icon-right-to-left
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-paragraph-right"></i>
		&nbsp;icon-paragraph-right
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-paragraph-left"></i>
		&nbsp;icon-paragraph-left
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-share-2"></i>
		&nbsp;icon-share-2
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-link-2"></i>
		&nbsp;icon-link-2
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-menu"></i>
		&nbsp;icon-menu
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-pin"></i>
		&nbsp;icon-pin
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-folder-fill"></i>
		&nbsp;icon-folder-fill
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-play"></i>
		&nbsp;icon-play
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-pause"></i>
		&nbsp;icon-pause
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-fast-backward"></i>
		&nbsp;icon-fast-backward
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-fast-forward"></i>
		&nbsp;icon-fast-forward
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-stop"></i>
		&nbsp;icon-stop
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-picture"></i>
		&nbsp;icon-picture
	</span>
	<span class="box1">
		<i aria-hidden="true" class="icon-code"></i>
		&nbsp;icon-code
	</span>
	</section>
	<footer>
		<p>Generated by <a href="http://keyamoon.com/icomoon/">IcoMoon</a></p>
	</footer>
	</div>
	<script>
	document.getElementById("glyphs").addEventListener("click", function(e) {
		var target = e.target;
		if (target.tagName === "INPUT") {
			target.select();
		}
	});
	</script>
</body>
</html>